<template>
  <div class="question_wrap">
    <div class="btn_wrap">
      <el-button type="primary" @click="handleAddQuestion">添加题目</el-button>
      <div class="list_wrap">
        <div class="list_item" :style="{borderColor:item.isValid==1?'green':'red'}" v-for="(item, index) in tableData" :key="index">
          <div :style="{color:item.isValid==1?'green':'red'}">{{ item.isValid==1?'有效':'无效' }}</div>
          <div class="con_item">
            <div class="label">题目名称:</div>
            
            <div class="con">{{ item.itemText }}</div>
            <div class="score_name">分数:</div>
            <div class="score">{{ item.score }}分</div>
            
            <div class="type">{{ item.itemTypeLabel }}</div>
            <div class="edit" @click="handleEdit(item)">
              <el-icon :size="18" color="#1890ff">
                <Edit />
              </el-icon>
            </div>
            <div class="del" @click="handleDel(item)">
              <el-icon :size="18" color="#d81e06">
                <Delete />
              </el-icon>
            </div>
          </div>
          <div class="con_item">
            <div class="label">选择项:</div>
            <div class="option_wrap">
              <el-radio-group v-if="item.itemType == 0" v-model="item.answer" class="ml-4" disabled>
                <el-radio v-for="(option, optionIndex) in item.optionList" :label="option" size="large"
                  :key="option + optionIndex">{{ option }}</el-radio>
              </el-radio-group>
              <el-checkbox-group v-if="item.itemType == 1" v-model="item.answerList" disabled>
                <el-checkbox v-for="(option, optionIndex) in item.optionList" :label="option"
                  :key="option + optionIndex">{{ option }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="con_item">
            <div class="label">正确答案:</div>
            <div class="answer">{{ item.answer }}</div>
          </div>
          <div class="serial_number">{{ (pageParams.current*Number(pageParams.size)) - Number(pageParams.size)+index + 1 }}.</div>
        </div>
      </div>
      <div class="pagination_wrap">
        <AplidPaginate v-bind="pageParams" @change="handlePageChange"></AplidPaginate>
      </div>
    </div>
    <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="添加题目" width="50%">
      <QuestionDialog :dialogType="dialogType" :id="id" ref="questionRef" @close="handleClose"></QuestionDialog>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { AplidPaginate } from '@/components/AplidCrud'
import QuestionDialog from './QuestionDialog.vue';
import { Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage,ElMessageBox } from 'element-plus';
import api from '@/apiMod'
interface Props {
  id: string
}
interface IPage {
  total?: number
  current?: number
  size?: number | string
  layout?: string
  small?: boolean
}
let dialogType = ref('add')
const props = defineProps<Props>()
const questionRef = ref()
const dialogVisible = ref(false)
const tableData = ref([])
const pageParams = ref<IPage>({
  current: 1,
  size: 10,
  total: 0
})
onMounted(() => {
  getList()
})
const handlePageChange = (data: IPage) => {
  pageParams.value = data
  console.log('页面切换',pageParams.value)
  getList()
}
const handleClose = () => {
  dialogVisible.value = false
  getList()
}
const handleAddQuestion = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
  nextTick(() => {
    questionRef.value.ruleFormRef.resetFields()
  })
}
const handleEdit = (row: any) => {
  dialogType.value = 'edit'
  dialogVisible.value = true
  nextTick(() => {
    questionRef.value.handleDetail(row.id);
  })
}
const handleDel = (row: any) => {
  ElMessageBox.confirm(
    `确认删除${row.itemText}的题目吗?`,
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const res = await api.view_bscQuestionItem_del([row.id],row.bankId,row.score,row.id)
      console.log('结果',res)
      if (res.code == 0) {
        ElMessage.success('删除成功')
        getList()
      }
    })
    .catch(() => {

    })
}
const getList = async () => {
  const params = {
    bankId: props.id,
    pageParaPO: {
      ...pageParams.value
    }
  }
  const res = await api.view_bscQuestionItem_page(params)
  res.data.records.map((item) => {
    item.optionList = item.option1.split(',')
    if (item.itemType == 1) {
      item.answerList = item.answer.split(',')
    }
  })
  pageParams.value.total = res.data.total
  tableData.value = res.data.records
}
</script>

<style scoped lang="scss">
.question_wrap {
  .list_wrap {
    margin-top: 10px;

    .list_item {
      border: 1px solid #eee;
      position: relative;
      color: #999;
      padding: 20px 30px;
      font-size: 16px;
      margin: 10px 0;

      .con_item {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        .label{
        width: 100px;
        }
        .score_name {
          width: 50px;
        }

        .con{
          width: 60%;
          font-weight: 900;
          color: #333;
          font-size: 18px;
          margin-left: 10px;
          margin-right: 150px;
        }
        .score {
          width:50px;
          font-weight: 900;
          color: #333;
          font-size: 18px;
        }

        .type {
          margin-left: 50px;
          color: #f59a24;
          flex: 1;
        }

        .option_wrap {
          margin-left: 10px;
        }

        .answer {
          margin-left: 10px;
          color: #70b603;
          font-size: 18px;
          font-weight: 900;
        }

        .edit {
          margin-left: 30px;
          margin-right: 10px;
          cursor: pointer;
        }

        .del {
          cursor: pointer;
        }
      }

      .serial_number {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #333;
      }
    }
  }

  .pagination_wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
}
</style>